import { Plugin } from 'xgplayer'

const { POSITIONS } = Plugin
let loop = false
// demoPlugin.js
export default class demoPlugin extends Plugin {
	// 插件的名称，将作为插件实例的唯一key值
	static get pluginName () {
		return 'sortPlugin'
	}

	static get defaultConfig () {
		return {
			// 挂载在controls的右侧，如果不指定则默认挂载在播放器根节点上
			position: POSITIONS.CONTROLS_RIGHT
		}
	}

	constructor(args) {
		super(args)
	}

	beforePlayerInit () {
		// TODO 播放器调用start初始化播放源之前的逻辑
	}

	afterPlayerInit () {
		// TODO 播放器调用start初始化播放源之后的逻辑
	}

	afterCreate () {
		this.icon = this.find('.icon')
		this.onIconClick = (e) => {
			// console.log('class为icon元素点击回调')
			loop = !loop
		}
		this.onClick = () => {
			loop = !loop
			if (!window.is_loop) {
				window.is_loop = true
			} else {
				window.is_loop = !window.is_loop
			}
			if(window.is_loop){
				document.getElementsByClassName('loop-icon')[0].src = require('@/assets/icon/video/loop.png')
				document.getElementsByClassName('loop-icon')[0].title = '循环播放'
			}else{
				document.getElementsByClassName('loop-icon')[0].src = require('@/assets/icon/video/next.png')
				document.getElementsByClassName('loop-icon')[0].title = '自动播放'
			}
			console.log('当前插件根节点点击事件', this.player, this.is_loop)
		}
		// 对当前插件根节点内部类名为.icon的元素绑定click事件
		this.bind('.icon', 'click', this.onIconClick)
		// 对当前插件根节点绑定click事件
		this.bind('click', this.onClick)
		//TODO 插件实例化之后的一些逻辑
	}

	destroy () {
		this.unbind('.icon', 'click', this.onIconClick)
		this.unbind('click', this.onClick)
		this.icon = null
		// 播放器销毁的时候一些逻辑
	}

	render () {
		if (window.is_loop) {
			return `<img src="${require("@/assets/icon/video/loop.png")}" title="循环播放" style="width: 26px;height: 25px;margin-top: 8px;margin-right: 13px;" class="icon loop-icon" />`
		} else {
			return `<img src="${require("@/assets/icon/video/next.png")}" title="自动播放" style="width: 26px;height: 25px;margin-top: 8px;margin-right: 13px;" class="icon loop-icon" />`
		}

	}
}